import React, { Component } from 'react'
import {connect} from 'react-redux'
import {List,Badge} from 'antd-mobile'
import {Navigate} from 'react-router-dom'
   //分组消息列表
  const nam=(arry,to) =>{
    const group=[] //分组后的消息
    let i=0
    arry.forEach((item) => {
        let isC=false;
        //判断分组里是否已存在
        group.forEach((item1,index) => {
            if(item1.chat_id===item.chat_id){
                isC=true
                i=index
            }
        })
        if(!isC){ 
            if(!item.read&&item.to===to){
                item.unReadCount=1
            }else{
                item.unReadCount=0
            }
            group.push(item)
        }else{
            if(!item.read&&item.to===to){
                group[i].unReadCount=group[i].unReadCount+1
            }
            if(item.create_time>group[i].create_time){
                item.unReadCount=group[i].unReadCount
                group[i]=item
               
            }
        }
    });
    group.sort(function (m1, m2) { // 如果结果<0, 将m1放在前面, 如果结果为0, 不变, 如果结果>0, m2前面
        return m2.create_time-m1.create_time
    })
    return group
}
 class Message extends Component {
    state={
        id:'',
        name:''
    }
    // componentDidMount(){
    //     // reqChatList().then((response)=>{
    //     //         console.log(this.props.userInfo._id,'wd ')
    //     //         const group =nam(response.data.chatMsgs,this.props.userInfo._id)
    //     //         console.log(group)
    //     //         this.setState({group,users:response.data.users})
    //     //     }
    //     // )  
    //     const group =nam(this.props.chat.chatMsgs,this.props.userInfo._id) 
    //     this.setState({group,users:this.props.chat.users})
    // }
 
    render() {
        const group =nam(this.props.chat.chatMsgs,this.props.userInfo._id)
        const users=this.props.chat.users
        if(this.state.id){
             console.log(`/main/chat/${this.state.id}/${this.state.name}`)
            return (
                <Navigate to={`/main/chat/${this.state.id}/${this.state.name}`}></Navigate>
            ) 
        }
      
        return (
            <div>
                <List>
                    {
                        group.map(item=>{
                            let header,username,id
                            if(item.from===this.props.userInfo._id){
                                header=users[item.to].header
                                username=users[item.to].username
                                id=item.to
                                
                            }else{
                                id=item.from
                                header=users[item.from].header
                                username=users[item.from].username
                            }
                            return(
                                <List.Item  key={item._id}
                                prefix={<img style={{width:'22px'}} src={require(`../../assets/images/${header}.png`).default} alt=""></img>}
                                onClick={() => {this.setState({id:id,name:username})}}
                                extra={<Badge content={item.unReadCount}></Badge>}
                                >   
                                {item.content}
                                <div style={{color:"#888",marginTop:'6px',fontSize:'15px'}}>{username}</div>
                                </List.Item>
                            )
                        })
                    }
                    
                </List>
            </div>
        )
    }
}
export default connect(
    state=>({userInfo:state.userInfo.info,chat:state.chat})
)(Message)
